<template>
  <el-drawer
    :visible="visible"
    size="100%"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    custom-class="custom-dialog"
    :withHeader="false"
    destroy-on-close
    style="position: absolute"
  >
    <div class="dialog-title">
      <div class="back" @click="handleClose">
        <i class="el-icon-back"></i>
      </div>
      <div class="title">
        {{ info?.filename }}
      </div>
    </div>
    <el-scrollbar style="height: calc(100vh - 44px)">
      <officePreview
        v-if="info?.filename"
        :fileUrl="fileUrl"
        :name="info?.filename"
      />
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </span>
  </el-drawer>
</template>
<script>
import officePreview from 'office-preview'
import panUtil from '../../../utils/common'
export default {
  props: {
    visible: false,
    info: {
      type: Object,
      default: function () {
        return {
          fileId: '',
          parentId: '',
          filename: '',
          folderFlag: 0,
          fileSizeDesc: '',
          fileType: 0,
          createTime: '',
          updateTime: '',
        }
      },
    },
  },
  components: {
    officePreview,
  },
  data() {
    return {
      fileUrl: null,
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('onClose')
    },
    init() {
      let fileId = this.info.fileId
      this.fileUrl = panUtil.getPreviewUrl(fileId)
    },
  },
  watch: {
    info: {
      handler: function (val) {
        if (val && val.filename && val.fileId) {
          this.init()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.init()
  },
}
</script>
<style lang="scss" scoped>
:deep(.custom-dialog) {
  &.is-fullscreen {
    left: 194px;
    width: calc(100% - 194px);
    margin: 0;
  }
  .dialog-title {
    display: flex;
    font-size: 16px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    z-index: 1;
    position: relative;
    .back {
      padding-right: 10px;
      transition: all 0.4s;
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
    }
  }
  .el-drawer__body {
    background-color: #efefef;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>
